<template>
  <el-row class="out-el-row">
    <el-col :span="19">
      <div class="typemsg-left">
        <el-row>
          <el-col :span="3">
            <img class="shishicai-icon" :src="lotteryLogo" alt="">
          </el-col>
          <el-col :span="10">
            <div class="typemsg-name-lucynum">
              <div class="typemsg-type-name">
                <p>
                  <span class="type-name">{{lotteryMessage.name}}</span>
                  <span class="
                red-color">{{lotteryMessage.short_expect}}</span>期&nbsp;每日&nbsp;
                  <span class="
                red-color">{{lotteryMessage.count}}</span>期&nbsp;今日剩余&nbsp;
                  <span class="
                red-color">{{lotteryMessage.remaining_num}}</span>期</p>
              </div>
              <div class="typemsg-luck-num my_text_center" :class="[this.$store.state.lotteryType == 'l28'?'typemsg-luck-numpc':'']">
                <ul>
                  <li v-for="(item,index) in lotteryMessage.open_code" :key='index'>{{item}}</li>
                </ul>
              </div>
              <div class="typemsg-help">
                <img class="email-icon" src="../../../assets/imgs/email.png" alt="">
                <span class="help-text">新手必看：
                  <!-- <router-link to="/helpCenter" class="how-play red-color">怎么玩？</router-link> -->
                  <em @click="getdatahelp" class="how-play red-color">怎么玩？</em>
                </span>
              </div>
            </div>
          </el-col>
          <el-col :span="1">
            <div class="cutting-line"></div>
          </el-col>
          <el-col :span="10">
            <div class="count-down">
              <div class="count-down-text">
                <p>距&nbsp;
                  <span class="
                red-color">{{countdownData.next_short_expect}}</span>&nbsp;期开奖剩</p>
              </div>
              <count-down :TypeMessage='countdownData'></count-down>
              <div class="show-button">
                  <div class="button-group" @mouseenter="isermaFn" @mouseleave="isermaFn">
                      <img src="" alt="">
                      <p>彩票 APP</p>
                  </div>
                  <div class="button-group" @click="clickPC()">
                     <img class="pc-icon" src="" alt="">
                      <p>彩票 PC端</p>
                  </div>
              </div>
              <div class="erma-box" v-show="iserma">
                  <div class="erweima-ios">
                     <div id=qrcodeIos>
                     </div>
                     <p>ios下载</p>
                      <div id=qrcodeAndorid>
                     </div>
                     <p>android下载</p>
                  </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :span="5">
      <div class="typemsg-right">
        <div class="zhibo-bg-pic" @mouseover.stop="showPlay" @mouseout.stop="hiddenPlay">
          <img :src="toLivePicUrl" alt="">
          <div @click="toKjzb">
            <img v-show="isInPic" class="zhibo-play-pic" src="../../../assets/imgs/play-icon.png" alt="" @mouseover.stop="showPlay" @mouseout.stop="hiddenPlay">
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  
</template>

<script>
import CountDown from "./CountDown";
import getTypemessageData from "../../../common/cpdt/getTypemessageData.js";
import QRCode from 'qrcodejs2';
export default {
  components: {
    CountDown
  },
  mounted() {
    getTypemessageData(this);
       this.axios
      .get("Download/index")
      .then(res => {
        if (res.data.status) {
           this.IosUrl = res.data.data.android.url;
           this.AndoridUrl = res.data.data.ios.url;
           this.pc_32_Url = res.data.data.pc32.url;
           this.pc_64_Url = res.data.data.pc64.url;
           this.qrcodeFn_ios(this.IosUrl);
            this.qrcodeFn_andorid(this.AndoridUrl);
        }else{
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
  },
  data() {
    return {
      isInPic: false,
      lotteryMessage: {},
      countdownData: {},
      toLivePic: {},
      sscLogo: "",
      lotteryLogo: "",
      toLivePicUrl: "",
      IosUrl:"",
      AndoridUrl:"",
      pc_32_Url:"",
      pc_64_Url:"",
      iserma:false,
    };
  },
  watch: {
    getStore: function(data) {
      if(data.lottery_id == this.$route.params.caizhongID){
          this.countdownData = data.countdown_time;
          this.lotteryMessage = data.lotteryData;
          this.toLivePic = data.live;
      }
    },
    $route: "fetchData"
  },
  methods: {
    isermaFn(){
      this.iserma = !this.iserma;
    },
    qrcodeFn_ios (text) {
        var qrcode = new QRCode('qrcodeIos', {
          width: 136,
          height: 136,
          colorDark : '#000000',
          colorLight : '#ffffff',
          correctLevel : QRCode.CorrectLevel.H 
        });
        qrcode.makeCode(text)
      },
    qrcodeFn_andorid (text) {
        var qrcode = new QRCode('qrcodeAndorid', {
          width: 136,
          height: 136,
          colorDark : '#000000',
          colorLight : '#ffffff',
          correctLevel : QRCode.CorrectLevel.H 
        });
        qrcode.makeCode(text)
      },
      getCPU()
        {
        var agent=navigator.userAgent.toLowerCase();
        if(agent.indexOf("win64")>=0||agent.indexOf("wow64")>=0) return "x64";
        return navigator.cpuClass;
      },
    clickPC() {
      if(this.pc_64_Url == '' || this.pc_32_Url==''){
        this.warnToastFn()
      }else{
        if(this.getCPU()=='x64'){
          location.href = this.pc_64_Url;
        }else{
          location.href = this.pc_32_Url;
        }
      }
    },
    warnToastFn() {
      this.$toast({
        message: "即将上线，敬请期待",
        time: 3000
      });
    },
    //跳转帮助中心
    getdatahelp(){
      let articleID = this.$store.state.articleID;
      this.$router.push(`/helpCenter/${articleID}`)
    },
    showPlay() {
      this.isInPic = true;
    },
    hiddenPlay() {
      this.isInPic = false;
    },
    // 
    toKjzb(){
      let lotteryid = this.$route.params.caizhongID;
      this.$router.push(`/live/${lotteryid}`)
    },
    fetchData() {
      if (this.$route.params.caizhongID) {
        getTypemessageData(this);
      }
    }
  },
  computed: {
    getStore() {
      return this.$store.state.TypeMessage;
    }
  }
};
</script>

<style lang="less" scoped>
@import url(../../../assets/css/typemessage.less);
</style>


